<template>
	<view class="container">
		<u-navbar title="我的置顶券">
			<text slot="right" class="navigatebill">账单</text>
		</u-navbar>
		<view class="tickettxt">
			<text>邀请工友入驻平台并缴纳保证金，可获得一天置顶卷</text>
		</view>
		<view class="tickets">
			<view class="ticketitem">
				<view class="ticketitem-left">
					<view class="ticketimage">
						<view class="tickettexts">
							<text class="biaoti">一天置顶券</text>
							<text>找活更方便</text>
						</view>
					</view>
					<text class="name">一天置顶券</text>
				</view>
				<view class="ticketuser-btn" v-on:click="openUseticket()">
					<text>使用</text>
				</view>
			</view>
			<view class="ticketitem">
				<view class="ticketitem-left">
					<view class="ticketimage">
						<view class="tickettexts">
							<text class="biaoti">一天置顶券</text>
							<text>找活更方便</text>
						</view>
					</view>
					<text class="name">一天置顶券</text>
				</view>
				<view class="ticketuser-btn" v-on:click="openUseticket()">
					<text>使用</text>
				</view>
			</view>
			<view class="ticketitem">
				<view class="ticketitem-left">
					<view class="ticketimage">
						<view class="tickettexts">
							<text class="biaoti">一天置顶券</text>
							<text>找活更方便</text>
						</view>
					</view>
					<text class="name">一天置顶券</text>
				</view>
				<view class="ticketuser-btn" v-on:click="openUseticket()">
					<text>使用</text>
				</view>
			</view>
		</view>
		<!-- 使用置顶券 模态框 -->
		<u-modal v-model="showUserticketModal" :content="useTicketmodalContent" title="温馨提示" :show-cancel-button="true" cancel-color="#878787" confirm-color="#0DAD63" :mask-close-able="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUserticketModal:false,
				useTicketmodalContent:'确认要使用一天置顶券吗？'
			}
		},
		methods: {
			openUseticket(){
				this.showUserticketModal=true;
			}
		}
	}
</script>

<style lang="scss">
      page{
		  width: 100%;
		  height: 100%;
	  }
	  .container{
		  width: 100%;
		  min-height: 100%;
		  .navigatebill{
			  color: rgba(67,67,67,0.8);
			  font-size: 16px;
			  margin-right: 10px;
		  }
		  .tickettxt{
			  color: rgba(135, 135, 135, 1);
			  font-size: 25upx;
			  width: 100%;
			  height: 80upx;
			  background-color: rgba(243, 247, 251, 1);
			  text{
				  margin-left: 30upx;
				  line-height: 80upx;
			  }
			  white-space:nowrap;
			  overflow:hidden;
			  text-overflow:ellipsis;
		  }
		  .tickets{
			  width: 100%;
			  height: auto;
			  padding-bottom: 30upx;
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  .ticketitem{
				  width: 690upx;
				  height: auto;
				  margin-top: 30upx;
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  .ticketitem-left{
					  height: 120upx;
					  display: flex;
					  width: 500upx;
					  align-items: center;
					  .name{
						  font-size: 30upx;
						  margin-left: 30upx;
						  white-space:nowrap;
						  overflow:hidden;
						  text-overflow:ellipsis;
					  }
				  }
				  .ticketimage{
				  	  height: 120upx;
					  width: 250upx;
					  background: url('~@/static/img_537.png') no-repeat;
					  background-size: 100% 100%;
				  }
				  .tickettexts{
					  width: 180upx;
					  height: 100%;
					  display: flex;
					  flex-wrap: wrap;
					  flex-direction: column;
					  justify-content: center;
					  align-items: center;
					  font-size: 21upx;
					  color: rgba(253, 59, 0, 1);
					  white-space:nowrap;
					  overflow:hidden;
					  text-overflow:ellipsis;
					  .biaoti{font-size: 25upx;}
				  }
				  .ticketuser-btn{
					  border: 1upx solid rgba(255, 157, 93, 1);
					  width:120upx;
					  height: 60upx;
					  color: rgba(255, 157, 93, 1);
					  font-size: 28upx;
					  display: flex;
					  align-items: center;
					  justify-content: center;
					  border-radius: 10upx;
				  }
			  }
		  }
	  }
</style>
